<template>
  <div class="login_container">
    <div class="user_form">
      <div class="user_form_title">
        <div
          :class="['user_form_title_item',activeIndex===index&&'active']"
          v-for="(item,index) in ['登录','注册']"
          :key="index"
          @click="activeIndex=index"
        >{{item}}</div>
      </div>
      <div class="user_form_content">
        <!-- 登录表单组件 -->
        <LoginForm v-if="activeIndex===0" />
        <!-- 注册表单组件 -->
        <RegisterForm v-else />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // data() { return { }; },
  data: () => ({
    activeIndex:0
  }),
};
</script>

<style  lang="less"  scoped >
.login_container {
  height: 700px;
  min-width: 1000px;
  background-image: url(http://157.122.54.189:9095/assets/images/th03.jfif);
  /* 类似 小程序中的mode=aspectFill */
  background-size: cover;
  position: relative;
}
.user_form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
background-color: #fff;
  .user_form_title {
    height: 50px;
    display: flex;
    .user_form_title_item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      background-color: #eeeeee;
      color:#666;
    }
    .active {
      color: orange;
      background-color: #fff;
      // border-top: 5px solid currentColor;
      position: relative;
      &::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: orange;
        top:0;
        left: 0;
      }
    }
  }

  .user_form_content {
  }
}
</style>